<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-loading="loading" v-cloak>
        <el-tabs :stretch="true" v-model="activeTab">
            <el-tab-pane label="基础" name="base">
                <el-form-item label="数据来源">
                    <el-select v-model="module.data.dataFrom" placeholder="请选择">
                        <el-option v-for="(d, index) in dataFromOptions" :key="index" :label="d.name" :value="d.value">{{
                            d.name }}</el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="显示数量">
                    <el-input-number v-model="module.data.pageSize" :min="1" :max="100"></el-input-number>
                </el-form-item>

                <album-picker size="mini" v-if="module.data.dataFrom === 'albumId'" v-model="module.data.albumId" />
                <tags-picker size="mini" v-if="module.data.dataFrom === 'tagIds'" v-model="module.data.tagIds" />

                <transfer v-if="module.data.dataFrom === 'ids'" :titles="['待选房源', '已选房源']" :data="allPosts" v-model="module.items"
                    :props="{ key: 'id', label: 'title' }" />

            </el-tab-pane>

            <el-tab-pane label="标题" name="header">
                <header-editor :module="module.header" v-if="module.header"></header-editor>
            </el-tab-pane>

            <el-tab-pane label="样式" name="style">
                <el-form-item label="风格">
                    <ul class="style-items">
                        <li @click="styleChangeHandle(item.value)" :class="{
                            'style-item': true,
                            active: module.data.styleName == item.value,
                        }" v-for="(item,i) in styleItems" :key="i">
                            <el-image :src="require('@/assets/images/pagemaker/posts-style/' + item.name + '.png')
                                "></el-image>
                        </li>
                    </ul>
                </el-form-item>

                <module-style-editor :module="module" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import Transfer from "@/components/Transfer";
import ModuleStyleEditor from "../ModuleStyleEditor/Index";
import { getPostSimpleList, getWeappPostList } from "@/api/post";
import LinkEditor from "@/components/LinkEditor";
import HeaderEditor from "../base/HeaderEditor";
import AlbumPicker from "./AlbumPicker";
import TagsPicker from './TagsPicker.vue'
export default {
    data () {
        return {
            dataFromOptions: [
                { name: '自动', value: 'auto' },
                { name: '手动挑选', value: 'ids' },
                { name: '从分类拉取', value: 'albumId' },
                { name: '从标签拉取', value: 'tagIds' },
            ],

            predefineColors: [
                "#ffffff",
                "#f9f9f9",
                "#f4f4f4",
                "#cecece",
                "#999999",
                "#1989fa",
                "#000000",
            ],
            activeTab: "base",
            allPosts: [],
            loading: false,
            // 样式选项
            styleItems: [
                { name: "style-0", value: 0 },
                { name: "style-1", value: 1 },
                { name: "style-2", value: 2 },
                { name: "style-3", value: 3 },
            ],
        };
    },
    watch: {},
    components: {
        TagsPicker,
        Transfer,
        ModuleStyleEditor,
        HeaderEditor,
        AlbumPicker,
        LinkEditor,
    },
    props: {
        module: { type: Object, default: null },
    },

    mounted: function () {
        this.loadAllPosts();
    },

    computed: {
        ...mapGetters(["myconfig"]),
    },

    methods: {
        styleChangeHandle: function (val) {
            this.$set(this.module.data, "styleName", val);
        },

        loadAllPosts: function (g) {
            this.loading = true;
            this.allPosts = [];
            var query = {
                per_page: 99999,
                order: "id desc",
                page: 1,
            };
            getWeappPostList(query).then((resp) => {
                this.allPosts = resp.data.result;
                this.loading = false;
            });
        },
    },
};
</script>

<style scoped>
.form-attrs {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.form-attrs .attr-label {
    margin-left: 10px;
}

.form-attrs .attr-label:first-child {
    margin-left: 0;
}

.style-items {
    margin: 10px 0 10px 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    user-select: none;
}

.style-items .style-item {
    width: 120px;
    box-shadow: 0 2px 17px 3px rgba(207, 221, 213, 0.35);
    border-radius: 3px;
    border: 1px solid #f1f1f1;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.style-items .style-item:nth-child(2n) {
    margin-right: 0;
}

.style-items .style-item:hover {
    box-shadow: 0 2px 17px 3px rgba(207, 221, 213, 0.6);
}

.style-items .style-item.active {
    border: 1px solid #1989fa;
    box-shadow: none;
}
</style>
